import React, { useState } from 'react';
import { Button, Input, message } from 'antd';
import {history} from 'umi';
import axios from 'axios';
import './register.css';

const RegisterPage = () => {
    const [name, setName] = useState('');
    const [password, setPassword] = useState('');
    const [phone, setPhone] = useState('');
    const [passwordConfirm, setPasswordConfirm] = useState('');



const handleRegister = async () => {
        try {
            const registerData = {
                name,
                password,
                phone,
                password_confirm: passwordConfirm
            };
            const response = await axios.post('/api/user/register', registerData);

            if (response.data.message === '注册成功') {
                message.success('注册成功，请登录！');
                history.push('/login');
            }
        } catch (error:any) {
            if (error.response && error.response.status === 400) {
                message.error(error.response.data.detail);
            } else {
                message.error('注册失败，请稍后重试');
            }
        } finally {
        }
    };
    const handleGoBack = () => {
        history.back();
    };
    return (
        <div className="register-container">
            <h2>用户注册</h2>
            <Input placeholder="姓名" value={name} onChange={(e) => setName(e.target.value)} className="input-field"/>
            <Input placeholder="手机号" value={phone} onChange={(e) => setPhone(e.target.value)} className="input-field"/>
            <Input placeholder="密码" type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input-field"/>
            <Input placeholder="确认密码" type="password" value={passwordConfirm} onChange={(e) => setPasswordConfirm(e.target.value)} className="input-field"/>
            <Button type="primary"onClick={handleRegister}className="register-button">注册</Button>
            <Button type="primary"onClick={handleGoBack}className="back-button">返回</Button>
        </div>
    );
};
export default RegisterPage;